<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- CSS定位是网页布局中控制元素位置的核心技术，可通过position定位模式属性和top/right/bottom/left边偏移属性实现 -->
<!-- 属性值： -->
<!--static，HTML 元素的默认值，即没有定位，遵循正常的文档流对象，边偏移属性无效-->
<!--relative，相对定位元素的位置是相对其正常位置。相对定位元素经常被用来作为绝对定位元素的参考容器（子绝父相）。(边偏移基准为元素自身原始位置的边界，偏移量相对于元素原始位置的四个边界计算，不脱离文档流，保留原空间)-->
<!--absolute，绝对定位元素的位置相对于最近的已定位祖先元素(非static定位的上级元素)，如果元素没有已定位的祖先元素，那么它的位置相对于<html>元素(边偏移基准为最近的非static定位元素的边界，偏移量相对于定位容器的四个内边界计算，脱离文档流，会自动变为块级元素，可设置宽高和边距)-->
<!--fixed，固定定位元素的位置相对于浏览器视口是固定位置,使其不随页面滚动而移动(边偏移基准为浏览器视口的边界，偏移量相对于视口四个边界计算，脱离文档流，会自动变为块级元素，可设置宽高和边距)。-->
<!--sticky，粘性定位元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位模式之间切换，需要指定边偏移属性，才可使粘性定位生效，否则其行为与相对定位相同。-->
<!-- top：定义元素上边界相对于其边偏移基准的偏移量 -->
<!-- right：定义元素右边界相对于其边偏移基准的偏移量 -->
<!-- bottom：定义元素下边界相对于其边偏移基准的偏移量 -->
<!-- left：定义元素左边界相对于其边偏移基准的偏移量 -->
<!-- 支持所有长度单位（px/em/%等）和负值 -->
<!-- 定位居中实现步骤： -->
<!-- 1.设置绝对定位 -->
<!-- 2.水平、垂直边偏移属性值为50% -->
<!-- 3.向左、上移动自身尺寸的一半 -->
    <!-- 可以设置左、上负外边距margin分别为自身尺寸的一半 -->
    <!-- 也可以设置transform: translate(-50%,-50%)百分比值相对于元素自身的宽度和高度进行计算 -->
    <!-- translateX(-50%)：向左移动元素自身宽度的 50%;translateY(-50%)：向上移动元素自身高度的 50% -->
<!-- 堆叠顺序z-index属性：仅对定位元素生效，设置定位元素的堆叠顺序，可以改变定位元素的显示顺序 -->
<!-- 正整数：值越大，元素越靠上（覆盖其他元素）。 -->
<!-- 负整数：值越小，元素越靠下（可能被其他元素覆盖）。 -->
<!-- 自动值（auto）：默认值，按照标签书写顺序，后来者居上，元素按文档流顺序堆叠。 -->
</body>
</html>